<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user';
import { useSettingStore } from '@/stores/setting';
import { useCourseStore } from '@/stores/course';
import { usePointStore } from '@/stores/point';
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token';
const SettingStore = useSettingStore();
const userStore = useUserStore();
// 点击折叠菜单+隐藏logo（修改仓库内的值）
const changeIcon = () => {
    SettingStore.fold = !SettingStore.fold
    SettingStore.logoShow = !SettingStore.logoShow
}
const router = useRouter();
// 退出登录，删除各项信息
const logout = () => {
    // 向服务器发请求，注销token
    // 清除仓库的用户信息
    // 跳转到登录页面
    userStore.userLogout();
    useCourseStore().removeCourseInfo();
    usePointStore().removeData();
    // token过期
    useTokenStore().removeToken();
    router.replace({ path: '/teacherLogin' })
    // window.location.reload();
}
</script>
<template>
    <div class="tabbar">
        <div class="tabbar_left">
            <!-- 左侧面包屑bread -->
            <!-- 左侧缩进 -->
            <el-icon style="margin-right:10px" @click="changeIcon">
                <component :is="SettingStore.fold ? 'Expand' : 'Menu'"> </component>
            </el-icon>

            <el-breadcrumb :separator-icon="ArrowRight">
                <!-- 动态显示路由 -->
                <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" :to="item.path">
                    <!-- 图标也展示 -->
                    <el-icon style="margin:0px 3px;">
                        <component :is="item.meta.icon"> </component>
                    </el-icon>
                    <!-- 面包屑展示路由标题 -->
                    <span>{{ item.meta.title }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="tabbar_right">
            <!-- 右侧 设置-->
            <el-button size="small" icon="Moon" circle></el-button>
            <el-image class="el-img" :src="userStore.userInfo.avatar" fit="cover"></el-image>
            <!-- 下拉菜单 -->
            <el-dropdown>
                <span class="el-dropdown-link">
                    <!-- 用户名 -->
                    {{ userStore.userInfo.username ? userStore.userInfo.username : "login" }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="SettingStore.scene = 1">个人设置</el-dropdown-item>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<style scoped>
.tabbar {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    /* background-color: #2a3441; */
}

.tabbar_left {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.tabbar_right {
    display: flex;
    align-items: center;
    margin-right: 20px;

    .el-img {
        width: 40px;
        height: 40px;
        margin-left: 20px;
        margin-right: 10px;
        border-radius: 50%;
    }
}
</style>
